<template>
	<view class="uni-padding-wrap uni-common-mt10">
	  <view class="demo">
	    <block v-if="imgSrcVal">
	      <image  :src="imgSrcVal"  mode="aspectFill" @longpress="longPressDel(typecode)" :style="{width:imgWidth,height:imgHeight}"></image>
	    </block>
	    <block v-else>
	      <view class="uni-hello-addfile licenseImg" :style="{backgroundImage:`url(${imageBg})`}" @click="chooseImage(typecode)">+ 点击上传图片</view>
	    </block>
	  </view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			imgSrcVal:''
		}
	},
	props: {
		typecode: Number,
		imageBg:String,
		imgWidth:String,
		imgHeight:String
	},
	methods:{
		//选择上传的图片
		chooseImage: function (num) {
		  uni.chooseImage({
		    count: 1,
		    sizeType: ['original', 'compressed'],
		    sourceType: ['album','camera'],
		    success: (res) => {
		      let fileInfo = res.tempFiles
			  let tempFilePaths = res.tempFilePaths[0]
		      let data = {
		        fileName: 'image.png',
		        bucket: 'yby-files',
		      }
		      //获取上传文件token
		      this.$store.dispatch('getUploadFileToken',data)
		        .then((ret) => {
				  let fileName = ret.data.data.fileName
				 const uploadTask =  uni.uploadFile({
					  url: 'https://up-z1.qiniup.com', 
					  filePath: tempFilePaths,
					  name: 'file',
					  formData: {
						token:ret.data.data.token,
						key:ret.data.data.key,
					  },
					  success: (uploadFileRes) => {
						    let uploadFile = JSON.parse(uploadFileRes.data)
							this.imgSrcVal = 'http://files.ybangy.net/'+uploadFile.key
							this.$emit('upload',uploadFile.key,num)
					  }
				  });
		        })
		        .catch((err) => {})
		    },
		  })
		},
		//长按删除图片
		longPressDel(num){
			uni.showModal({
				title: '温馨提示',
				content: '确定要删除此图片吗？',
				confirmText:'确定',
				confirmColor:'#5880ff',
				success:(res)=>{
					if (res.confirm) {
						this.imgSrcVal = ''
						this.$emit('delsrc','',num)
					}
				}
			});
		},
	}
}
</script>

<style lang="scss">
	.licenseImg{
		  background-repeat: no-repeat;
		  background-size: 100% 95%;
		  background-position: center center;
	}
</style>
